<template>
  <div class="home">
    <div class="top"><h2>首页</h2></div>
    <div class="big-content">
      <div class="big-content-left">
        <HomeTree></HomeTree>
      </div>
      <div class="big-content-right">
          <HomeTable ref="refHomeTable"></HomeTable>
          <div class="home-btn">
            <el-button type="primary" @click="confirm()">确定</el-button>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import HomeTree from "./tree/HomeTree.vue";
import HomeTable from "./tableData/HomeTable.vue";
import { mapMutations } from "vuex";
export default {
  components: {
    HomeTree,
    HomeTable,
  },
  computed: {},
  mounted() {},
  watch: {},
  methods: {
    ...mapMutations(["showHomeTableData"]),
    //确认按钮
    confirm() {
      let arr = [];
      arr = this.$refs.refHomeTable.multipleSelection;
      if (!arr.length) {
        this.$message({
          message: "至少选择一条数据",
          type: "warning",
        });
      } else {
        let arrId = [];
        arr.forEach((item) => {
          if (arrId.indexOf(item.id) == -1) {
            arrId.push(item.id);
          }
        });
        this.showHomeTableData(arrId);
        this.$router.push("/about");
      }
    },
  },
};
</script>
<style lang="less" scope>
.home {
  .top {
    width: 100%;
    height: 100px;
    border: 1px solid yellow;
    text-align: center;
    line-height: 100px;
  }
  .big-content {
    width: 100%;
    height: calc(100vh - 100px);
    border: 1px solid blue;
    display: flex;
    justify-content: space-around;
    padding: 5px;
    .big-content-left {
      width: 220px;
      height: 100%;
      border: 1px solid black;
      padding: 10px;
    }
    .big-content-right {
      width: calc(100vw - 240px);
      height: 100%;
      border: 1px solid red;
      padding: 10px;
      .home-btn {
        text-align: center;
        margin-top: 50px;
      }
    }
  }
}
</style>
